<template>
  <div class="reg-login-container">
    <div class="login-body">
      <div class="login-header">
        <div class="header-top">
          <div class="top-text">
            ABOUT DUAL BY FIT ISLAND·MAKE A BOOKING·MANAGE WAITINGS
          </div>
          <a @click="toIndex">Go Index</a>
        </div>
        <div class="header-bottom">
          <a id="mainlogo1" href="#"
            ><img src="../static/slider/LOGO.png" />
          </a>
          <div class="btm-text" v-if="regStep == 1">ONLINE BOOKINGS</div>
          <div class="btm-text" v-if="regStep == 2">QUESTIONNAIRE</div>
        </div>
      </div>
      <div class="login-content">
        <div class="login-tips" v-if="regStep == 1">
          PLEASE CREATE A NEW ACCOUNT
        </div>
        <div class="login-tips" v-if="regStep == 2">
          QUESTIONNAIRE FOR OUR CUSTOMERS
        </div>
        <div class="login-box" v-if="regStep == 1">
          <div class="login-input">
            <div class="login-title">Create a New account</div>
            <div style="display: flex">
              <div class="input-item" style="margin-right: 20px">
                <div class="input-title">Email Address</div>
                <input type="text" v-model="regInfo.userMail" />
              </div>
              <div class="input-item">
                <div class="input-title">CAPTCHA</div>
                <input type="text" v-model="regInfo.code" />
                <span class="get-code" @click="getCode" v-if="isClickCode">{{
                  codeText
                }}</span>
                <span class="get-code" v-if="!isClickCode"
                  >Resend in {{ codeNum }} s</span
                >
              </div>
            </div>
            <div style="display: flex">
              <div class="input-item" style="margin-right: 20px">
                <div class="input-title">Password</div>
                <input type="password" v-model="regInfo.password" />
              </div>
              <div class="input-item">
                <div class="input-title">Confirm Password</div>
                <input type="password" v-model="regInfo.rePassword" />
              </div>
            </div>
            <div class="input-item" style="margin-right: 20px">
              <div class="input-title">Telephone</div>
              <input type="text" v-model="regInfo.phone" />
            </div>
            <div class="submit-conf">
              <!-- <a href="#">Forgot Your Password ?</a> -->
              <button @click="nextStep">Next</button>
              <a href="#" @click="toLogin">Or Log In</a>
            </div>
          </div>
        </div>
        <div class="question-box" v-if="regStep == 2">
          <div class="question-body">
            <div class="question-item">
              <div>1）Name:</div>
              <input type="text" v-model="regInfo.nickName" />
            </div>
            <div class="question-item">
              <div>2）Height:</div>
              <input type="text" v-model="regInfo.height" />
              cm
            </div>
            <div class="question-item">
              <div>3）Weight:</div>
              <input type="text" v-model="regInfo.weight" />
              kg
            </div>
            <div class="question-item">
              <div>4）Gender:</div>
              <div style="margin-left: 0.5vw">
                <el-radio v-model="regInfo.sex" label="0">M</el-radio>
                <el-radio v-model="regInfo.sex" label="1">F</el-radio>
              </div>
            </div>
            <div class="question-item">
              <div>5）Age:</div>
              <input type="text" v-model="regInfo.age" />
            </div>
            <div class="question-item">
              <div>6）Date of Birth:</div>
              <input type="text" v-model="regInfo.birthday" />
              (DD/MM/YY)
            </div>
            <div class="question-item no-flex">
              <div>7）Goals:</div>
              <div style="margin-top: 0.5vh; margin-left: 0.5vw">
                <div>
                  <el-radio v-model="regInfo.golas" label="1"
                    >Fat loss</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="regInfo.golas" label="2"
                    >Maintenance</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="regInfo.golas" label="3"
                    >Muscle Growth</el-radio
                  >
                </div>
              </div>
            </div>
            <div class="question-item no-flex">
              <div>8）Activity Level:</div>
              <div style="margin-top: 0.5vh; margin-left: 0.5vw">
                <div>
                  <el-radio v-model="regInfo.grade" label="1"
                    >Below 1 hour per week</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="regInfo.grade" label="2"
                    >1-3 hours per week</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="regInfo.grade" label="3"
                    >Above 3 hours per week.</el-radio
                  >
                </div>
              </div>
            </div>
            <div class="question-item no-flex">
              <div>9）How much are your food expenses monthly?</div>
              <div style="margin-top: 0.5vh; margin-left: 0.5vw">
                <div>
                  <el-radio v-model="regInfo.spend" label="1"
                    >Below $1000</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="regInfo.spend" label="2"
                    >$1000-$20000</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="regInfo.spend" label="3"
                    >Above $2000</el-radio
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="question-body">
            <div class="question-title">
              From 1-10, please indicate how determined<br />you are to improve
              your current body<br />shape, with 1 being the lowest.
            </div>
            <div class="determined-list">
              <div
                class="determined-item"
                :style="
                  !item.isChecked ? '' : 'border-bottom: 1px solid #2e0c00;'
                "
                v-for="item in determinedList"
                :key="item.num"
                @click="selectDetermine(item)"
              >
                <div>{{ item.num }}</div>
                <img
                  src="../static/slider/determine.png"
                  alt=""
                  v-if="!item.isChecked"
                />
                <img
                  src="../static/slider/determined.png"
                  alt=""
                  v-if="item.isChecked"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="sub-pre" v-if="regStep == 2">
          <button @click="regStep = 1">Previous</button>
          <button @click="submitReg">SUBMIT NOW</button>
        </div>
      </div>
      <div class="login-footer">
        <div class="foot-body">
          <a id="subLogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <span class="foot-web"> 2024 @ DUAL BY FIT ISLAND</span>
          <span class="foot-link">
            : www.dual by fit island.sg .: contact . terms & condition . fag :
            private dinner</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { Message } from "element-ui";

export default {
  name: "Register",
  data() {
    return {
      determinedList: [
        {
          num: 10,
          isChecked: false,
        },
        {
          num: 9,
          isChecked: false,
        },
        {
          num: 8,
          isChecked: false,
        },
        {
          num: 7,
          isChecked: false,
        },
        {
          num: 6,
          isChecked: false,
        },
        {
          num: 5,
          isChecked: false,
        },
        {
          num: 4,
          isChecked: false,
        },
        {
          num: 3,
          isChecked: false,
        },
        {
          num: 2,
          isChecked: false,
        },
        {
          num: 1,
          isChecked: false,
        },
      ],
      radio: "",
      codeText: "Obtain Code",
      codeNum: 60,
      isClickCode: true,
      regStep: 1,
      regInfo: {
        userMail: "",
        password: "",
        code: "",
        nickName: "",
        height: "",
        weight: "",
        sex: "",
        age: "",
        birthday: "",
        golas: "",
        grade: "",
        spend: "",
        decision: "",
        phone: "",
      },
    };
  },
  methods: {
    submitReg() {
      this.$login.register(this.regInfo).then((res) => {
        console.log(res, "注册");
        if (res && res.code === "00000") {
          Message({
            message: "Register successfully!",
            type: "success",
            duration: 2 * 1000,
          });
          let token =
            res.data.loginResult.tokenType +
            " " +
            res.data.loginResult.accessToken;
          let userInfo = JSON.stringify(res.data);
          this.$user.setToken(token);
          this.$user.setUserInfo(userInfo);
          setTimeout(() => {
            this.$router.push({
              name: "Index",
            });
          }, 1000);
        }
      });
    },
    selectDetermine(item) {
      this.determinedList.forEach((ele) => {
        ele.isChecked = false;
      });
      this.regInfo.decision = item.num;
      item.isChecked = true;
    },
    getCode() {
      this.$login
        .getCode({
          email: this.regInfo.userMail,
        })
        .then((res) => {
          if (res && res.code == "00000") {
            this.$message({
              message: "Verification code sent successfully!",
              type: "success",
            });
            let timer = setInterval(() => {
              this.codeNum -= 1;
              if (this.codeNum <= 0) {
                clearInterval(timer);
                this.isClickCode = true;
                this.codeNum = 60;
              }
            }, 1000);
            this.isClickCode = false;
          }
        });
    },
    nextStep() {
      this.regStep = 2;
    },
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    toIndex() {
      this.$router.push({
        name: "Index",
      });
    },
    login() {
      this.$login.login(this.loginInfo).then((res) => {
        console.log("登录", res);
      });
    },
    register() {
      this.$login.register(this.regInfo).then((res) => {
        console.log(res, "注册");
        if (res.code === 200) {
          this.$alert("Account created successfully!", "SUCCESS", {
            confirmButtonText: "confirm",
            callback: (action) => {
              this.isLogin = true;
              this.regInfo = {
                userName: "",
                password: "",
                rePassword: "",
              };
            },
          });
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.reg-login-container {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: rgb(244, 222, 185);
  display: flex;
  justify-content: center;
}

.login-body {
  width: 55vw;
  border-right: 0.5px solid #2e0c00;
  border-left: 0.5px solid #2e0c00;
  // height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  flex: 2;
  background-color: #2e0c00;
  padding: 3vh 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header-top {
  display: flex;
  justify-content: space-between;
  color: #b08e4b;
}

.header-top a {
  font-size: 0.9vw;
  cursor: pointer;
}
.top-text {
  font-size: 0.83vw;
}

.login-header a {
  text-decoration: none;
  color: #b08e4b;
}
.header-top > a {
  color: #f3deb9;
}
.login-content {
  border-top: 4px solid #b08e4b;
  flex: 15;
  padding: 2vh 3vw 0 3vw;
}
.login-footer {
  flex: 2;
  padding: 2vh 3vw;
  border-top: 4px solid #b08e4b;
}

#mainlogo1 img {
  width: 10.5vw;
}
.btm-text {
  color: #f3deb9;
  font-size: 1.45vw;
  margin-left: 15px;
}

.header-bottom {
  display: flex;
}

.login-tips {
  margin: 3.5vh 0;
  font-size: 1.05vw;
  font-weight: bold;
  letter-spacing: 1px;
  color: #5a3819;
}
.login-box {
  background-color: #f3deb9;
  border-radius: 5px;
  padding: 2vh 1.8vw;
}

#subLogo img {
  width: 6vw;
}

.foot-body {
  display: flex;
  align-items: center;
}
.foot-web {
  font-size: 0.8vw;
  color: #5a3819;
  margin: 0 5px;
}
.foot-link {
  font-size: 0.7vw;
  color: #b08e4b;
}

.login-title {
  font-size: 1.3vw;
  color: #5a3819;
  margin-bottom: 3vh;
}
.input-item {
  margin-bottom: 2.2vh;
}
.input-item .input-title {
  color: #5a3819;
  margin-bottom: 0.4vh;
  font-size: 0.9vw;
}

.get-code {
  font-size: 0.6vw;
  margin-left: 0.5vw;
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
}
.input-item input {
  background-color: #f3deb9;
  border: 1px solid #b08e4b;
  height: 2.2vh;
  width: 10vw;
  border-radius: 3px;
  font-size: 0.7vw;
}
.submit-conf {
  display: flex;
  flex-direction: column;
  font-size: 0.85vw;
}

.submit-conf a {
  text-decoration: none;
  color: #5a3819;
}
.submit-conf a:hover {
  text-decoration: none;
  color: #b08e4b;
}
.submit-conf button {
  margin: 2.2vh 0;
  width: 9.1vw;
  height: 3.2vh;
  background: linear-gradient(to bottom, #f3deb9, #b08e4b);
  border: 1px solid #5a3819;
  color: #f3deb9;
  font-size: 0.85vw;
  border-radius: 3px;
  cursor: pointer;
}

.submit-conf button:active {
  background: #5a3819;
  cursor: pointer;
}
.question-box {
  font-size: 0.8vw;
  display: flex;
  justify-content: space-between;
  width: 95%;
  .question-body {
    // display: flex;
    width: 40%;
    border-radius: 5px;
    padding: 2vh 2vw;
    background: #f3deb9;
    color: #2e0c00;
    .question-item {
      display: flex;
      align-items: center;
      margin-bottom: 2vh;
      //   width: 10vw;
      input {
        border: none;
        background: #f3deb9;
        border-bottom: 1px solid #2e0c00;
        outline: none;
        width: 5vw;
      }
    }

    .question-title {
      font-size: 0.9vw;
      font-weight: bold;
    }
    .determined-list {
      margin-top: 2vh;

      .determined-item {
        cursor: pointer;
        user-select: none;
        position: relative;
        height: 2vh;
        border-bottom: 1px solid #b08e4b;
        display: flex;
        justify-content: center;
        margin-bottom: 2vh;
        > div {
          z-index: 99;
          color: #fff;
          font-size: 0.9vw;
          font-weight: bold;
        }
        > img {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 1%);
          width: 2vw;
          height: 2vh;
        }
      }
    }
  }
}
.el-radio {
  color: #2e0c00;
  font-size: 0.7vw;
}
::v-deep .el-radio__inner {
  border: 1px solid #b08e4b;
  background-color: #f3deb9;
}
::v-deep .el-radio__inner:hover {
  border-color: #2e0c00 !important;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #2e0c00;
  background: #2e0c00;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #2e0c00;
}

::v-deep
  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: 0 0 2px 2px #b08e4b;
}

::v-deep .el-radio__label {
  padding-left: 0.2vw;
  font-size: .8vw;

}

.no-flex {
  display: block !important;
}

.sub-pre {
  margin-top: 3vh;
  display: flex;
  justify-content: space-around;

  button {
    margin: 2.2vh 0;
    width: 9.1vw;
    height: 3.2vh;
    background: linear-gradient(to bottom, #f3deb9, #b08e4b);
    border: 1px solid #5a3819;
    color: #f3deb9;
    font-size: 0.85vw;
    border-radius: 3px;
    cursor: pointer;
  }
  button:active {
    background: #5a3819;
    cursor: pointer;
  }
}
</style>